<template>
  <div class="wrapper">
    <div class="container">
      <div class="mail-box">
        <section class="mail-box-info">
          <header class="header">
            <div class="btn-group pull-right">
              <button class="btn btn-sm btn-primary" type="button">
                <i class="fa fa-chevron-left"></i>
              </button>
              <button class="btn btn-sm btn-primary" type="button">
                <i class="fa fa-chevron-right"></i>
              </button>
            </div>
            <div class="btn-toolbar">
              <div class="btn-group">
                <button class="btn btn-sm btn-primary"><i class="fa fa-refresh"></i></button>
              </div>
              <div class="btn-group select">
                <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">
                  <span style="width: 70px;" class="dropdown-label">Filter</span> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu text-left text-sm">
                  <li><a href="#">Read</a></li>
                  <li><a href="#">Unread</a></li>
                  <li><a href="#">Starred</a></li>
                  <li><a href="#">Unstarred</a></li>
                </ul>
              </div>
            </div>
          </header>
          <section class="mail-list" style="height:600px; border:3px solid red">
            <ul class="list-group ">
              <li v-for="list in msgList" class="list-group-item">
                <p v-if="list.type=='msg'"><strong>{{list.name}} : </strong> <span v-html="list.data"></span></p>
                <p v-if="list.type=='into'"><span>{{list.data}}</span></p>
              </li>
            </ul>
          </section>
          <footer class="footer" style="width:100%">
            <div class="panel">
              <form>
                <div id="reply" class="form-control" style="height:80px" contenteditable="true" >

                </div>
              </form>

              <footer class="panel-footer" style="width:100%">
                <button v-on:click="sendMsg()" class="btn btn-post pull-right">发送</button>
                <ul class="nav nav-pills p-option">
                  <el-popover
                    ref="popover4"
                    placement="bottom"
                    width="400"
                    trigger="click">
                    <div class="row" style="padding-right:25px">
                        <div v-for="(val,key) in emojis" class="col-xs-1"><img class="emoji" v-bind:src="val"  v-on:click="selectImg(val)" /></div>
                    </div>
                  </el-popover>
                  <li>
                    <el-button  v-popover:popover4><i class="fa fa-meh-o"></i></el-button>
                  </li>
                </ul>
              </footer>
            </div>
          </footer>
        </section>
        <aside class="mail-nav mail-nav-bg-color">
          <header class="header"><h4>当前用户</h4></header>
          <div class="mail-nav-body">
            <ul class="">
              <li v-for=" (val,key) in users">{{val}}</li>
            </ul>
          </div>
        </aside>
      </div>
    </div>

  </div>
</template>
<style>
  .emoji{
    cursor:pointer;
  }
  .mail-nav-body{
    height:600px;
    overflow:auto;

  }

  .footer{
    width:100%;
    background-color:#cccccc;
  }
  .p-text-area{
  }
</style>
<script>
  import emoji  from  '../plug/emoji.js'
  export default{
    data(){
      return {
        userInfo: '',
        users: [],
        msgList: [],
        Connected: false, //连接状态
        websocket: null,
        text: '',//发送消息内容
        emojis:[],
      }
    },
    mounted: function(){

      this.getUser();
      this.emojis=emoji.emoji().data[0];

    },
    updated: function(){

      if( this.Connected ){
        //        this.getUsers();
        this.listenMsg();
        //连接成功获取用户信息
      }
    },
    methods: {
      open( msg, type ) {
        this.$message( {
          message: msg,
          type: type
        } );
      },
      open3() {
        var _self = this;
        this.$prompt( '请输入名字', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消', //          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          //          inputErrorMessage: '邮箱格式不正确'
        } ).then( function( val ){

          if( val.value == null ){
            _self.open( '不能为空', 'warning' );
          }
        } ).catch( function(){
        } );
      },
      /**
       * 获取当前进入用户
       */
      getUser(){
        var name = prompt( '请输入名字' );
        this.userInfo = name;
        if( name != '' ){
          this.sendUserInfo();
        }else{
          this.msgList.push( {
            name: this.userInfo,
            data: '请输入名字，连接失败',
            type: 'into'
          } );
        }
      },
      /**
       * 发送用户信息
       */
      sendUserInfo: function(){
        this.$http.post( '/home/chat/user', { data: this.userInfo } ).then( function( response ){
          if( response.data.status ){
            this.msgList.push( {
              name: this.userInfo,
              data: response.data.data,
              type: 'into'
            } );
            this.getScoket();
          }else{
            alert( response.data.data );
            this.getUser();
            this.msgList.push( {
              name: this.userInfo,
              data: '用户名已经存在',
              type: 'into'
            } );
          }
        }, function( response ){
          this.open( '网络错误', 'warning' )
        } );
      },
      /**
       * 连接socket
       */
      getScoket: function(){
        var _self = this;
        var wsServer = 'ws://192.168.33.10:9502';
        _self.websocket = new WebSocket( wsServer );
        _self.websocket.onopen = function( evt ){
          _self.msgList.push( {
            name: _self.userInfo,
            data: '连接服务成功！',
            type: 'into'
          } );
          _self.websocket.send( JSON.stringify( {
            fun: 'auth',
            name: _self.userInfo
          } ) );//连接成功发送用户名
          _self.Connected = true;
          _self.getUsers();
        };
        _self.websocket.onclose = function( evt ){
          console.log( "Disconnected" );
        };
        _self.websocket.onerror = function( evt, e ){
          _self.Connected = false;
          _self.msgList.push( {
            name: _self.userInfo,
            data: '连接服务失败！',
            type: 'into'
          } );
        };
      },
      /**
       * 轮询监听消息
       */
      listenMsg: function(){
        var _self = this;
        setInterval( function(){
          _self.websocket.onmessage = function( evt ){
            console.log(1123);
            _self.getUsers();
            var data = JSON.parse( evt.data );
            _self.msgList.push( {
              name: data.name,
              data: data.data,
              type: data.type
            });
          };
        }, 2000 );
      },
      /**
       *  发送消息
       */
      sendMsg: function(){
        var text=$('#reply').html();
        this.text=text;
        if( this.text == '' ){
          return;
        }else{
          this.websocket.send( this.text );
        }
      },
      /**
       *  获取所有在线用户
       */
      getUsers: function(){
        this.$http.post( '/home/chat/user/gets' ).then( function( response ){
          if( response.data.status ){
            this.users = response.data.data;
          }
        }, function( response ){
          this.open( '网络错误', 'warning' )
        } );
      },
      selectImg(val){

        var html=text+"<img src="+val+">";
        $('#reply').html(html);
        $('.el-popover').toggle('click');
      },
    }
  }
</script>